<!DOCTYPE html>
<HTML>

<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link href="../static/css/default.css?v=20191209" rel="stylesheet">
</head>

<body>
    <div class="bodyContent">
        <div class="searchBar">
            <div class="col-xs-10 col-sm-11 col-md-11 mt2">
                <form class="form-inline layui-form" action="javascript:;">
                    <select class="form-control" name="Type" lay-ignore>
                        <option value="1">按月</option>
                        <option value="2">按周</option>
                        <option value="3">按天</option>
                    </select>
                    <button id="btnSearch" class="btn btn-primary btn-sm " type="submit" lay-submit
                        lay-filter="searchFormFilter">搜索</button>
                </form>
            </div>
        </div>

        <div style="height: 90%; padding: 2%;">
            <div id="container" style="height: 100%"></div>
        </div>
    </div>

    <script src="../static/js/jquery-3.3.1.min.js"></script>
    <script src="../static/Plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../static/Plugins/layui/layui.all.js"></script>
    <script src="../static/js/jquery-confirm.min.js"></script>
    <script src="../static/js/jquery-ext-user.js?v=20191209"></script>

    <script src="../static/js/echarts.min.js"></script>

    <script type="text/javascript">
        $(function () {
            var objChart = {
                myChart: null,
                option: {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: []
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: []
                },
                init: function () {
                    var self = this;
                    var dom = document.getElementById("container");
                    self.myChart = echarts.init(dom);
                    self.search();
                },
                search: function () {
                    var self = this;
                    form.on("submit(searchFormFilter)", function (data) {
                        $.postdata("/clientApi/UserBuyOrder/GetBuyStatisticsChart", data.field,
                            function (res) {
                                self.option.title.text = res.Title;
                                self.option.legend.data = res.LegendData;
                                self.option.xAxis.data = res.XaxisData;
                                self.option.series = res.SeriesItems;
                                self.render();
                            });
                        return false;
                    });

                    $('#btnSearch').click();
                },
                render: function () {
                    var self = this;
                    self.myChart.setOption(self.option, true);
                }
            };
            objChart.init();
        });
    </script>
</body>

</HTML>